import Tabs, { TabsProps } from '@/components/Tabs';
import { deviceControllerGetDeviceLevelInfo as getDeviceLevelInfo } from '@/services/ess/deviceInfo';
import { Radio } from 'antd';
import _ from 'lodash';
import React, { useEffect, useState } from 'react';
import { useIntl, useModel } from 'umi';
import BatteryProblemChart from './components/Chart/BatteryProblemChart';
import CollectProblemChart from './components/Chart/CollectProblemChart';
import CommunicateLossRateChart from './components/Chart/CommunicateLossRateChart';
import CommunicateProblemChart from './components/Chart/CommunicateProblemChart';
import TempProblemChart from './components/Chart/TempProblemChart';
import BatteryProblemList from './components/List/BatteryProblemList';
import CollectProblemList from './components/List/CollectProblemList';
import CommunicateLossRateList from './components/List/CommunicateLossRateList';
import CommunicateProblemList from './components/List/CommunicateProblemList';
import TempProblemList from './components/List/TempProblemList';
import Styles from './index.less';

const Index: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const [bmsInfo, setBmsInfo] = useState<API.DeviceInfo[]>([]);
  const [clusterInfo, setClusterInfo] = useState<API.DeviceInfo[]>([]);
  const [showType, setShowType] = useState('1');
  const [tabKey, setTabKey] = useState('1');
  const intl = useIntl();

  const history = false;

  // const items: TabsProps['items'] = [
  //   {
  //     key: '1',
  //     label: '待处理',
  //   },
  //   {
  //     key: '2',
  //     label: '历史数据',
  //   },
  // ];

  useEffect(() => {
    getDeviceLevelInfo({ stationId: initialState?.stationId }).then((res) => {
      const combinedTree: API.DeviceInfo[] = [
        ...(res?.data?.deviceClusterInfos ?? []),
        ...(res?.data?.deviceBoxInfos ?? []),
        ...(res?.data?.deviceBmsInfos ?? []),
      ];
      const nodeMapping = {};
      for (const node of combinedTree) {
        node.children = [];
        nodeMapping[node.id] = node;
      }
      const tree: API.DeviceInfo[] = [];
      combinedTree.forEach((node) => {
        if (node.parentId === 0) {
          tree.push(node);
        } else if (nodeMapping[node.parentId]) {
          nodeMapping[node.parentId].children.push(node);
        }
      });
      setClusterInfo(tree);

      const combinedTree2: API.DeviceInfo[] = [
        ..._.cloneDeep(res?.data?.deviceBoxInfos ?? []),
        ..._.cloneDeep(res?.data?.deviceBmsInfos ?? []),
      ];
      const nodeMapping2 = {};
      for (const node of combinedTree2) {
        node.children = [];
        nodeMapping2[node.id] = node;
      }
      const tree2: API.DeviceInfo[] = [];
      combinedTree2.forEach((node) => {
        if (node.parentId === 0) {
          tree2.push(node);
        } else if (nodeMapping2[node.parentId]) {
          nodeMapping2[node.parentId].children.push(node);
        }
      });
      setBmsInfo(tree2);
    });
  }, []);

  const items: TabsProps['items'] = [
    {
      key: '1',
      label: intl.formatMessage({ id: 'diagnosticPrediction.diagnosis.batteryProblem' }),
      children:
        showType === '1' ? (
          <BatteryProblemList history={history} clusterInfo={clusterInfo} />
        ) : (
          <BatteryProblemChart history={history} />
        ),
    },
    {
      key: '2',
      label: intl.formatMessage({ id: 'diagnosticPrediction.diagnosis.temperatureProblem' }),
      children:
        showType === '1' ? (
          <TempProblemList history={history} clusterInfo={clusterInfo} />
        ) : (
          <TempProblemChart history={history} clusterInfo={clusterInfo} />
        ),
    },
    {
      key: '3',
      label: intl.formatMessage({ id: 'diagnosticPrediction.diagnosis.collectionProblem' }),
      children:
        showType === '1' ? (
          <CollectProblemList history={history} clusterInfo={clusterInfo} />
        ) : (
          <CollectProblemChart history={history} clusterInfo={clusterInfo} />
        ),
    },
    {
      key: '4',
      label: intl.formatMessage({ id: 'diagnosticPrediction.diagnosis.communicationProblem' }),
      children:
        showType === '1' ? (
          <CommunicateProblemList history={history} bmsInfo={bmsInfo} />
        ) : (
          <CommunicateProblemChart history={history} bmsInfo={bmsInfo} />
        ),
    },
    {
      key: '5',
      label: intl.formatMessage({
        id: 'diagnosticPrediction.diagnosis.communicationPacketLossRate',
      }),
      children:
        showType === '1' ? (
          <CommunicateLossRateList history={history} />
        ) : (
          <CommunicateLossRateChart history={history} />
        ),
    },
  ];

  // if (history) {
  //   items.push({
  //     key: '5',
  //     label: '通讯丢包率',
  //     children: <CommunicateLossRateList history={history} />,
  //   });
  // }

  return (
    <div>
      <Tabs
        activeKey={tabKey}
        onChange={(key) => {
          setTabKey(key);
        }}
        items={items}
        tabBarExtraContent={
          <Radio.Group
            value={showType}
            buttonStyle="solid"
            onChange={(event) => {
              setShowType(event?.target.value);
            }}
            size="middle"
          >
            <Radio.Button
              value="1"
              className={Styles.radioGroup}
              style={{ height: 32, lineHeight: '32px' }}
            >
              {intl.formatMessage({ id: 'statistics.common.list' })}
            </Radio.Button>
            <Radio.Button
              value="2"
              className={Styles.radioGroup}
              style={{ height: 32, lineHeight: '32px' }}
            >
              {intl.formatMessage({ id: 'statistics.common.chart' })}
            </Radio.Button>
          </Radio.Group>
        }
      />
    </div>
  );
};
export default Index;
